import { defineComponent, ref } from 'vue'
import Card from '@/components/Card'
import './index.less'
import { getPermissionData, deletePermissionData } from '@/api/permission'
import PermissionModel, { FormState } from './components/PermissionModel'
import { Modal } from 'ant-design-vue'
import usePagination from '@/hooks/usePagination'

export type Tmode = 'add' | 'edit'

export default defineComponent({
  name: 'permission',
  props: {},
  setup() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '标识',
        dataIndex: 'code',
        key: 'code'
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description'
      },
      {
        title: '操作',
        dataIndex: 'handle',
        key: 'handle'
      }
    ]

    function changeTreeData(arr: any, pid: string) {
      return arr.filter((item: any) => {
        if (item.pid === pid) {
          item.children = changeTreeData(arr, item.id)
          return true
        }
      })
    }

    function deleteChildren(arr: any) {
      arr.forEach((item: any) => {
        if (item.children.length === 0) {
          delete item.children
        } else {
          deleteChildren(item.children)
        }
      })
    }

    // const permissionData = ref([]) as any
    const visible = ref(false)
    const mode = ref<string>('')
    const modalData = ref({} as FormState)

    const { dataSource, run } = usePagination(getPermissionData, {
      formatResult: (res: any) => {
        const arr = changeTreeData(res.data, '0')
        deleteChildren(arr)
        return arr
      },
      configFn: () => run(),
      pagination: {
        pageSize: 2,
        currentKey: 'page',
        pageSizeKey: 'pagesize'
      }
    })

    const addModal = (row: any) => {
      visible.value = true
      modalData.value = row
      mode.value = 'add'
    }
    const eaitModal = (row: any) => {
      visible.value = true
      mode.value = 'edit'
      modalData.value = JSON.parse(JSON.stringify(row))
    }

    const deleteModal = (id: string) => {
      Modal.confirm({
        title: '删除',
        content: '确认删除该权限吗?',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: async () => {
          await deletePermissionData(id)
          run()
        },
        class: 'test'
      })
    }

    // async function getData () {
    //   // const data: any = await getPermissionData()
    //   const data: any = await dataSource.value
    //   let arr = changeTreeData(data, '0')
    //   deleteChildren(arr)
    //   permissionData.value = arr
    // }

    // ;(async function () {
    //   await dataSource.value
    //   await getData()
    // })()

    return () => (
      <div>
        <Card>
          <div class="card-btn">
            <a-button type="primary">权限分配</a-button>
          </div>
        </Card>
        <Card bkCr="#fff" padding="8px" border="none" boxShadow="none">
          <a-table
            data-source={dataSource.value}
            columns={columns}
            bordered
            rowKey="id"
            v-slots={{
              bodyCell: ({ column, record }: any) =>
                column.dataIndex === 'handle' && (
                  <div>
                    <a-button type="link" onClick={() => addModal(record)}>
                      添加
                    </a-button>
                    <a-button type="link" onClick={() => eaitModal(record)}>
                      操作
                    </a-button>
                    <a-button
                      type="link"
                      onClick={() => deleteModal(record.id)}
                    >
                      删除
                    </a-button>
                  </div>
                )
            }}
          />
        </Card>
        <PermissionModel
          v-model:visible={visible.value}
          v-model:mode={mode.value}
          modalData={modalData.value}
          onGetData={run}
        />
      </div>
    )
  }
})
